export interface StackSeriesData {
    dnsData: number[],
    tcpData: number[],
    sslData: number[],
    ttfbData: number[],
    contentData: number[],
    domData: number[],
    resourceData: number[],
    timesData: number[]
}

export function stackBarChartTemplate(title: string, seriesData: StackSeriesData, xAxisData: string[]) {
    if (!seriesData || !xAxisData) {
        return null;
    }
    return {
        legend: {
            data: ['DNS', 'TCP', 'SSL', 'TTFB', 'Content Download', 'DOM Parse', 'Resource Download']
        },
        color: ['#3b9ffc'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '30',
            right: '30',
            bottom: '20',
            containLabel: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        calculable: true,
        xAxis: {
            // boundaryGap: false, //x轴从0开始到结束显示
            // onZero: true,
            splitLine: {
                show: false
            }, //去除网格线
            splitArea: {
                show: false
            }, //保留网格区域
            axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                    color: '#808492',
                    width: 0.6, //这里是为了突出显示加上的
                },
            },
            axisTick: {
                show: true
            },
            axisLabel: { //轴上的数据样式
                color: '#808492',
            },
            data: xAxisData,
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#999"
                },
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        },
        series: [
            {
                name: 'DNS',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.dnsData,
                itemStyle: {
                    color: '#3CA356'
                }
            },
            {
                name: 'TCP',
                type: 'bar',

                barGap: 0,
                stack:'ALL',
                data: seriesData.tcpData,
                itemStyle: {
                    color: '#5BAD4A'
                }
            },
            {
                name: 'SSL',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.sslData,
                itemStyle: {
                    color: '#7AB63E'
                }
            },
            {
                name: 'TTFB',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.ttfbData,
                itemStyle: {
                    color: '#9AC032'
                }
            },
            {
                name: 'Content DownLoad',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.contentData,
                itemStyle: {
                    color: '#B9C926'
                }
            },
            {
                name: 'DOM Parse',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.domData,
                itemStyle: {
                    color: '#D8D31A'
                }
            },
            {
                name: 'Resource Download',
                type: 'bar',
                barGap: 0,
                stack:'ALL',
                data: seriesData.resourceData,
                itemStyle: {
                    normal: {
                        barBorderRadius: [2, 2, 0, 0],
                        color: '#F7DC0E'
                    }
                },
            },
        ]
    };
}